<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> <!-- 新增编码声明 -->
    <title>WebSocket测试页面</title>
    <style>
        .container { margin: 20px; padding: 15px; border: 1px solid #ccc; }
        .status { color: #666; margin-bottom: 10px; }
        input[type="text"] { width: 300px; padding: 5px; }
        button { padding: 5px 10px; margin-left: 5px; }
        .log {
            height: 200px;
            border: 1px solid #ddd;
            padding: 10px;
            margin-top: 10px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<!-- 注解方式测试 -->
<div class="container">
    <h3>注解方式测试 (/chat1)</h3>
    <div class="status" id="status1">状态: 未连接</div>
    <input type="text" id="message1" placeholder="输入消息 (格式: 用户名/令牌/消息)">
    <button onclick="connect1()">连接</button>
    <button onclick="disconnect1()" disabled>断开</button>
    <button onclick="send1()">发送</button>
    <div id="log1" class="log"></div>
</div>

<!-- Handler方式测试 -->
<div class="container">
    <h3>Handler方式测试 (/chat)</h3>
    <div class="status" id="status2">状态: 未连接</div>
    <input type="text" id="message2" placeholder="输入消息 (以001开头有特殊处理)">
    <button onclick="connect2()">连接</button>
    <button onclick="disconnect2()" disabled>断开</button>
    <button onclick="send2()">发送</button>
    <div id="log2" class="log"></div>
</div>

<script>
        // 注解方式连接相关变量
        let ws1 = null;
        const url1 = 'ws://localhost:9090/chat1';

        // Handler方式连接相关变量
        let ws2 = null;
        const url2 = 'ws://localhost:9090/chat';

        // 通用方法：添加日志
        function addLog(logElement, message) {
            const logDiv = document.getElementById(logElement);
            logDiv.innerHTML += `<div>${new Date().toLocaleTimeString()}: ${message}</div>`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }

        // ================= 注解方式连接逻辑 =================
        function connect1() {
            const parts = document.getElementById('message1').value.split('/');
            if (parts.length < 3) {
                alert('请输入格式: 用户名/令牌/消息');
                return;
            }

            ws1 = new WebSocket(`${url1}/${parts[0]}/${parts[1]}`);

            ws1.onopen = () => {
                document.querySelector('#status1').textContent = '状态: 已连接';
                document.querySelector('[onclick="connect1()"]').disabled = true;
                document.querySelector('[onclick="disconnect1()"]').disabled = false;
                addLog('log1', '连接已建立');
            };

            ws1.onmessage = (e) => addLog('log1', `收到: ${e.data}`);
            ws1.onerror = (e) => addLog('log1', `错误: ${e.message}`);
            ws1.onclose = () => {
                document.querySelector('#status1').textContent = '状态: 已断开';
                document.querySelector('[onclick="connect1()"]').disabled = false;
                document.querySelector('[onclick="disconnect1()"]').disabled = true;
                addLog('log1', '连接已关闭');
            };
        }

        function send1() {
            const msg = document.getElementById('message1').value.split('/')[2];
            if (ws1 && ws1.readyState === WebSocket.OPEN) {
                ws1.send(msg);
                addLog('log1', `发送: ${msg}`);
            }
        }

        function disconnect1() {
            if (ws1) ws1.close();
        }

        // ================= Handler方式连接逻辑 =================
        function connect2() {
            ws2 = new WebSocket(url2);

            ws2.onopen = () => {
                document.querySelector('#status2').textContent = '状态: 已连接';
                document.querySelector('[onclick="connect2()"]').disabled = true;
                document.querySelector('[onclick="disconnect2()"]').disabled = false;
                addLog('log2', '连接已建立');
            };

            ws2.onmessage = (e) => addLog('log2', `收到: ${e.data}`);
            ws2.onerror = (e) => addLog('log2', `错误: ${e.message}`);
            ws2.onclose = () => {
                document.querySelector('#status2').textContent = '状态: 已断开';
                document.querySelector('[onclick="connect2()"]').disabled = false;
                document.querySelector('[onclick="disconnect2()"]').disabled = true;
                addLog('log2', '连接已关闭');
            };
        }

        function send2() {
            const msg = document.getElementById('message2').value;
            if (ws2 && ws2.readyState === WebSocket.OPEN) {
                ws2.send(msg);
                addLog('log2', `发送: ${msg}`);
            }
        }

        function disconnect2() {
            if (ws2) ws2.close();
        }

        // 输入框回车发送
        document.getElementById('message1').onkeypress = (e) => {
            if (e.key === 'Enter') send1();
        };
        document.getElementById('message2').onkeypress = (e) => {
            if (e.key === 'Enter') send2();
        };
    </script>
</body>
</html>